import { Space, Button, message, Form, Image } from 'antd';
import ProCard from '@ant-design/pro-card';
import React, { useState, useRef, useEffect } from 'react';
import { getDvaApp, history, } from 'umi';
import ProForm, {
    ProFormText,
    ProFormTextArea,
    ProFormSelect,
} from '@ant-design/pro-form';
import type { ProFormInstance } from '@ant-design/pro-form';
import { PageContainer } from '@ant-design/pro-layout';

import $utils from '@/utils/utils';
import { appTypeData, } from '@/utils/common';
import { appConfigureCreate } from '@/services/appConfigure';

const Detail: React.FC = () => {

    // 解决无法调用dispatch
    const dispatch = getDvaApp()._store.dispatch;
    const formRef = useRef<ProFormInstance>();
    const [cur_id, setCur_id] = useState<string>();
    const [appConfigureDetail, setAppConfigureDetail] = useState<any>();


    const l_state: any = history.location.state;
    if (!cur_id && !l_state) {
        history.push('/OperationsMange/Notice');
    }

    const id: string = l_state?.data?.id || '';
    //  同path更新,只更新state时，通过id重新请求数据
    if ((l_state && id) && (!cur_id || cur_id !== id)) {
        setCur_id(id);
    } else if (l_state && !id && cur_id !== id) {
        setCur_id('');
    }

    const isCreate: boolean = l_state?.status === 'create';


    // 快递公司列表
    useEffect(() => {
        if (!cur_id) {
            setAppConfigureDetail(undefined);
            formRef && formRef.current?.resetFields();
        }
        else {
            setAppConfigureDetail(l_state?.data);
            formRef && formRef.current?.resetFields();
            return;
        }
    }, [cur_id]);

    return (
        <PageContainer>
            {(isCreate || appConfigureDetail) && <ProCard style={{ marginTop: 8 }} gutter={8} >
                <ProForm
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    layout={"horizontal"}
                    formRef={formRef}
                    initialValues={isCreate ? undefined : appConfigureDetail}
                    onFinish={async (values) => {

                        const msg = await appConfigureCreate(values);
                        if (msg.code === 0) {
                            message.success('新增成功', 1, () => {
                                // 设置当前tab对象
                                $utils.setNewTab(dispatch, { name: '版本升级配置', path: '/System/appConfigure', isTopMenu: true });
                                history.push('/System/appConfigure');
                            });
                        }
                    }}
                    submitter={{
                        render: (props, doms) => {
                            return [
                                <Space style={{ marginLeft: '16.66666667%' }}>
                                    <Button type="primary" htmlType="submit">保存</Button>
                                    <Button onClick={() => {
                                        // 设置当前tab对象
                                        $utils.setNewTab(dispatch, { name: '版本升级配置', path: '/System/appConfigure', isTopMenu: true });
                                        history.push('/System/appConfigure');
                                    }}>取消</Button>
                                </Space>
                            ]
                        }
                    }}
                >
                    <ProFormText
                        width={'md'}
                        name="versionTitle"
                        label={'版本标题'}
                        disabled={!isCreate}
                        placeholder={'请输入版本标题'}
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    />
                    <ProFormText
                        width={'md'}
                        name="versionName"
                        label={'版本名称'}
                        disabled={!isCreate}
                        placeholder={'请输入版本名称'}
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    />
                    <ProFormText
                        width={'md'}
                        name="versionCode"
                        label={'版本号'}
                        disabled={!isCreate}
                        placeholder={'请输入版本号'}
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    />
                    <ProFormSelect
                        width={'md'}
                        name="appType"
                        label={'类型'}
                        disabled={!isCreate}
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                        fieldProps={{
                            options: appTypeData
                        }}
                    />
                    <ProFormText
                        width={'md'}
                        name="url"
                        label={'下载地址'}
                        placeholder={'请输入下载地址'}
                        disabled={!isCreate}
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                    />
                    <ProFormTextArea label="描述" disabled={!isCreate} name="desc" placeholder={'请输入内容(200字)'} rules={[
                        {
                            required: true,
                        },
                    ]} />
                </ProForm>
            </ProCard>}
        </PageContainer>
    );
};

export default Detail;
